<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('merchantApplicationIndex.商家入驻管理')" />
    <el-radio-group
      v-model="searchForm.status"
      class="mb10"
      @change="handleSearch"
    >
      <el-radio-button
        v-for="item in statusOptions"
        :key="item.value"
        :label="$t('merchantApplicationIndex.' + item.label)"
        :value="item.value"
      />
    </el-radio-group>
    <div class="flex_aic_jcsb">
      <div class="flex_aic gap-4">
        <el-input
          v-model="searchForm['name' + locale]"
          :placeholder="$t('merchantApplicationIndex.请输入商家名称')"
          style="width: 200px"
        >
          <template #prefix>
            <span class="color-555555">{{ $t('merchantApplicationIndex.商家名称') }}</span>
          </template>
        </el-input>
      </div>
      <div class="flex_aic">
        <el-button @click="resetSearch">{{ $t('merchantApplicationIndex.重置') }}</el-button>
        <el-button type="primary" @click="handleSearch">{{ $t('merchantApplicationIndex.查询') }}</el-button>
      </div>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 170px)"
      border
      v-loading="loading"
    >
      <el-table-column prop="settleContact" :label="$t('merchantApplicationIndex.申请人姓名')" />
      <el-table-column prop="phone" :label="$t('merchantApplicationIndex.联系电话')" />
      <el-table-column prop="name" :label="$t('merchantApplicationIndex.店铺名称')">
        <template #default="{ row }">
          {{ row["name" + locale] }}
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('merchantApplicationIndex.入驻类别')">
        <template #default="{ row }">
          {{ row.settleType == 1 ? $t('merchantApplicationIndex.个人') : $t('merchantApplicationIndex.企业') }}
        </template>
      </el-table-column>
      <el-table-column prop="applyTime" :label="$t('merchantApplicationIndex.申请时间')">
        <template #default="{ row }">
          {{ moment(row.applyTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="status" :label="$t('merchantApplicationIndex.状态')">
        <template #default="scope">
          {{ getStatusText(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('merchantApplicationIndex.操作')" width="200">
        <template #default="scope">
          <div class="flex_aic_jcc">
            <el-button
              type="text"
              size="small"
              @click="handleDetail(scope.row)"
            >
              {{ $t('merchantApplicationIndex.详情') }}
            </el-button>
            <template v-if="scope.row.status === 1">
              <el-button
                type="text"
                size="small"
                @click="handleDetail(scope.row, true)"
                v-my-point="'tenant:checkSettled'"
              >
                {{ $t('merchantApplicationIndex.审核') }}
              </el-button>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="pageInfo.page"
        v-model:page-size="pageInfo.size"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageInfo.size = $event"
        @current-change="pageInfo.page = $event"
      />
    </div>

    <!-- <editDia ref="editDiaRef" v-model="showEditDia" :data="editData" /> -->
    <detailDia
      ref="detailDiaRef"
      v-model="showDetailDia"
      :id="editId"
      :isAudit="isAudit"
      @success="getTableData"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import editDia from "./editDia.vue";
import detailDia from "./detailDia.vue";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import moment from "moment";
import i18n from "@/i18n";

const { locale, t } = useI18n();
const langs = reactive(Object.keys(i18n.global.messages.value));
const searchForm = ref({
  status: 1,
});
langs.forEach((lang) => {
  searchForm.value["name" + lang] = "";
});

const loading = ref(false);
const editDiaRef = ref(null);
const showEditDia = ref(false);
const editId = ref({});
const detailDiaRef = ref(null);
const showDetailDia = ref(false);
const editData = ref({});
const total = ref(0);
const pageInfo = ref({
  page: 1,
  size: 10,
});
//是否审核
const isAudit = ref(false);

const tableData = ref([]);

const getStatusType = (status) => {
  const map = {
    1: "warning",
    2: "success",
    3: "danger",
  };
  return map[status];
};

const getStatusText = (status) => {
  return t('merchantApplicationIndex.' + statusOptions.find((item) => item.value === status).label);
};

const statusOptions = [
  {
    label: "待审核",
    value: 1,
  },
  {
    label: "已拒绝",
    value: -1,
  },
  // {
  //   label: "未入驻",
  //   value: 0,
  // },

  // {
  //   label: "已入驻",
  //   value: 2,
  // },
];

const resetSearch = () => {
  searchForm.value = {
    status: 1,
  };
  langs.forEach((lang) => {
    searchForm.value["name" + lang] = "";
  });
  handleSearch();
};

const handleDetail = (row, _isAudit = false) => {
  editId.value = row.id;
  isAudit.value = _isAudit;
  showDetailDia.value = true;
};

const handleSearch = () => {
  pageInfo.value.page = 1;
  getTableData();
};

const getTableData = () => {
  loading.value = true;
  Api.getTenantList({
    page: pageInfo.value.page - 1,
    size: pageInfo.value.size,
    ...searchForm.value,
  }).then((res) => {
    tableData.value = res.data.content;
    total.value = +res.data.totalElements;
  }).finally(()=>{
    loading.value = false;
  });
};

watch(
  pageInfo,
  () => {
    getTableData();
  },
  { deep: true }
);

onMounted(() => {
  getTableData();
});
</script>

<style lang="scss" scoped>
.cover-table {
  margin-top: 20px;
}
</style>
